<script setup>
import {userStore} from '@pi/user';
import {upkeepStore} from '@pi/upkeep';
import {onMounted, reactive, ref} from "vue";
import {baseURL, getNowDate, msg} from "@ut/tool.js";

let user = userStore();
let upkeep = upkeepStore();
let options = reactive({pageNo: 1, pageSize: 10});
let state = reactive([
    {label: '未处理', type: 'warning'},
    {label: '已处理', type: 'success'},
]);
let upk = reactive({
    show: false,
    type: 0,
    form: {},
    rules: {
        content: {required: true, message: '请填写情况说明', trigger: 'blur'}
    },
    open(type = 0, row = {uid: user.info.id}) {
        upk.type = type;
        upk.form = {...row};
        upk.show = true;
    },
    close() {
        upk.show = false;
        formRef.value.resetFields();
    }
});
let formRef = ref();

// 下载附图
function download(url) {
    if (url) window.open(url);
    else msg('反馈无附件', 'warning');
}

// 更新状态
async function updateState(row) {
    let form = {...row};
    form.state = 1;
    delete form.user;
    delete form.executorUser;
    form.executor = user.info.id;
    form.et = getNowDate();
    await upkeep.update(form);
    upkeep.get(options);
}

// 文件上传成功
function upSuccess({data}) {
    upk.form.img = data;
}

// 添加 or 修改
function submit() {
    formRef.value.validate(async e => {
        if (e) {
            let form = {...upk.form};
            delete form.user;
            await upkeep[upk.type ? 'update' : 'create'](form);
            upk.close();
            upkeep.get(options);
        }
    })
}

// 删除
async function remove(id) {
    await upkeep.remove(id);
    upkeep.get(options);
}

onMounted(() => {
    if (user.info.role === 2) options.uid = user.info.id;
    upkeep.get(options);
})
</script>

<template>
    <h5 class="title">维修上报</h5>
    <div class="btn">
        <el-button type="primary" icon="Plus" size="small" plain @click="upk.open()" v-if="user.info.role === 2">上报</el-button>
    </div>
    <el-table :data="upkeep.list" style="height: calc(100% - 100px)" size="small" border stripe show-overflow-tooltip>
        <el-table-column prop="id" label="编号" align="center" />
        <el-table-column prop="user.nickname" label="反馈学生" align="center" />
        <el-table-column prop="user.building.label" label="楼号" align="center" />
        <el-table-column prop="user.chamber.label" label="寝室号" align="center" />
        <el-table-column prop="content" label="反馈内容" align="center" />
        <el-table-column label="状态" align="center">
            <template #default="scope">
                <el-tag :type="state[scope.row.state].type">{{state[scope.row.state].label}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="executorUser.nickname" label="处理人" align="center" />
        <el-table-column prop="et" label="处理时间" align="center" />
        <el-table-column prop="time" label="上报时间" align="center" />
        <el-table-column label="操作" align="center" width="240" fixed="right">
            <template #default="{row}">
                <el-button type="primary" link icon="View" @click="download(row.img)">查看附图</el-button>
                <template v-if="!row.state">
                    <el-button type="primary" link icon="View" @click="updateState(row)" v-if="user.info.role === 1">处理反馈</el-button>
                    <template v-else>
                        <el-button type="warning" link icon="Edit" @click="upk.open(1, row)">修改</el-button>
                        <el-button type="danger" link icon="Delete" @click="remove(row.id)">删除</el-button>
                    </template>
                </template>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination">
        <el-pagination background layout="prev, pager, next" :total="upkeep.total" small @current-change="upkeep.get(options)" v-model:current-page="options.pageNo" :page-size="options.pageSize" />
    </div>

    <el-dialog title="维修上报" v-model="upk.show" width="600px" @close="upk.close" draggable>
        <el-form ref="formRef" :model="upk.form" :rules="upk.rules" label-width="80px">
            <el-form-item label="情况说明" prop="content">
                <el-input v-model="upk.form.content" type="textarea" :rows="6" placeholder="请输入情况说明"/>
            </el-form-item>
            <el-form-item label="附件">
                <el-upload drag :action="baseURL + '/file/up'" :data="{type: 'file'}" :limit="1" multiple :on-success="upSuccess" style="width: 100%;">
                    <el-icon class="el-icon--upload">
                        <upload-filled />
                    </el-icon>
                    <div class="el-upload__text">拖拽或 <em>点击上传文件</em></div>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="submit">保存</el-button>
            <el-button @click="upk.close">取消</el-button>
        </template>
    </el-dialog>
</template>

<style scoped lang="less">

</style>